import { Ref, computed, reactive, ref } from "vue";
/**
 * 获取验证码hook函数
 * @param {number} sec 多少秒后可以重新获取 
 * @param {number} interval 每多少秒执行一次 毫秒单位
 * @param {string[]} tipsArr 提示语数组，根据状态切换提示语
 * @return   tips 当前提示语 status 当前状态 getVerificationCode 倒计时方法
 */
export default function useVerificationCode(sec : number = 60, interval : number = 1000, tipsArr : string[] = ['获取验证码', '秒后重新获取', '重新获取']) {
	const second : Ref<number> = ref(sec) // 倒计时秒数。
	const status : Ref<number> = ref(1); // 1 初始状态 2 倒计时状态 3 发送成功状态

	/**
	 * 获取验证码事件
	 */
	const getVerificationCode = () => {
		second.value = 60; // 重置倒计时秒数，开始倒计时。
		status.value = 2; // 切换状态，显示倒计时。
		const timer = setInterval(() => { // 启动倒计时。
			second.value--; // 每秒减少1。
			if (second.value === 0) { // 倒计时结束。
				clearInterval(timer); // 停止倒计时。
				status.value = 3; // 切换状态，重新获取。
			}
		}, interval); // 每秒执行一次。		
	}
	// 根据状态切换提示语。
	const tips = computed(() => {
		if (status.value === 1) { // 初始状态，显示提示语数组的第一条。
			return tipsArr[0]; // 返回提示语数组的第一条。
		} else if (status.value === 2) { // 倒计时状态，显示提示语数组的第二条。
			return second.value + tipsArr[1]; // 返回提示语数组的第二条。
		} else if (status.value === 3) { // 发送成功状态，显示提示语数组的第三条。
			return tipsArr[2]; // 返回提示语数组的第三条。
		}
	})

	return {
		tips,
		status,
		getVerificationCode,
	}
}